<template>
	<view class="order-table c-flex c-flex-col">
		<view class="header c-flex jc-between">
			<view class="h-item c-flex-1" v-for="(item,i) in headers" :key="i">
				{{item.name}}
			</view>
		</view>
		<view class="t-body c-flex c-flex-col ">
			<view class="t-item c-flex c-flex-col" v-for="(item,i) in list" :key="i">
				<view class="product c-flex jc-between">
					<text class="c-flex-1" v-for="(h,i) in headers">{{item[h.field]||''}}</text>
				</view>
				<view class="c-flex" v-if="item.code.length>0">
					<view class="code-str isHide" >编号：{{item.code.join('、')||''}}</view><!-- :class="{'isHide':isHide}" -->
					<text class="view-more" v-if="item.code.length> 2" @click="onViewMore(item)">查看更多</text>
				</view>
			</view>
		</view>
		<!-- 查看已扫码 -->
		<code-details ref="codeDetails" :list="codes" :isEdit="isEdit" v-if="isViewCodes" @onConfirm="onConfirm"></code-details>
		
	</view>
</template>

<script>
	import codeDetails from './code-details.vue';
	export default{
		components:{codeDetails},
		props:{
			headers:{
				type:Array,
				default:[]
			},
			list:{
				type:Array,
				default:[]
			},
			isEdit:{
				type:Boolean,
				default:false
			},
		},
		data(){
			return {
				isHide:true,
				isViewCodes:false,
				codes:[],
				currProdItem:null
			}
		},
		methods:{
			onViewMore(val){
				this.currProdItem = val;
				this.isHide = !this.isHide;
				this.isViewCodes = true;
				this.codes = val.code;
				this.$nextTick(()=>{
					this.$refs.codeDetails.onOpen();
				});
				this.$emit('onViewMore',val)
			},
			onConfirm(data){
				if(this.currProdItem)this.currProdItem.code = data;
				this.isViewCodes = false;
				this.$nextTick(()=>{
					this.$refs.codeDetails.onClose();
				});
				this.$emit('refreshData',this.currProdItem)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-table{
		background: #FFFFFF;border-radius: 22rpx;padding:32rpx;margin-top:48rpx;
		.header{
			margin-bottom:32rpx;
			.h-item{
				font-weight: 500;font-size: 28rpx;color: #333333;
			}
		}
		.t-body{
			gap:66rpx;
			.t-item{
				.product{font-weight: 400;font-size: 26rpx;color: #333333;margin-bottom:16rpx;}
				.code-str{font-weight: 400;font-size: 24rpx;color: #969696;}
				.isHide{white-space: nowrap;text-overflow: ellipsis; overflow: hidden;width: 80%;}
				.view-more{font-weight: 400;font-size: 20rpx;color: #E86748;}
			}
		}
	}
</style>